<template>
  <div>
      <list title="购物车"/>
      <div class="content">
        <div class="items">
          <van-swipe-cell v-for="(i,index) in items" :key="i.id" >
          <div class="item">
            <van-checkbox @click="itemCheckChange" v-model="i.checked" />
              <van-card
                :num="i.num"
                :price="i.minPrice"
                :title="i.name"
                :thumb="i.pic"
               >
              <template #footer>
                  <van-stepper
                  @change="itemNumChange"
                   v-model="i.num" />
              </template>
            </van-card>
          </div>
              <template #right>

                <van-button square @click="dele(index)" text="删除" type="danger" class="delete-button" />
              </template>
           </van-swipe-cell>
          <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="allChecked">全选</van-checkbox>
        </van-submit-bar>
        </div>
      </div>
      <My-Tabbar/>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import list from '@views/Home/component/ItemListHead'
import { mapState, mapMutations } from 'vuex'
import { Dialog } from 'vant'
export default {
  created () {
    this.calcTotal()
  },
  data () {
    return {
      num: ''
    }
  },
  methods: {
    dele (index) {
      // 删除商品
      Dialog.confirm({
        title: '删除商品',
        message: '确定删除这个商品吗！！'
      })
        .then(() => {
          this.items.splice(index, 1)
          this.set_items(this.items)
          this.calcTotal()
        })
        .catch(() => {
          // on cancel
        })
    },
    onSubmit () {
      // 提交订单事件 去除未选中商品 将选中商品 总价格一起发给订单接口
      // const checkItems = this.items.filter(item => item.checked)
      // const total = this.total
      this.$router.push('/oder')
    },
    itemCheckChange () {
      // 双向绑定 this.items中某个商品选中状态已经改变
      // 改变后视图刷新 this.items 从新计算 但是依赖没有改变 只要改变视图依赖
      this.set_items(this.items)
      this.calcTotal()
      // every 判断数组中的元素是否都符合条件 符合为tuer 只要有一个不符合则为false
      const allChecked = this.items.every(item => item.checked)
      this.set_allChecked(allChecked)
    },
    itemNumChange () {
      // 点击改变商品数量 将改变后的items 赋值给在vuex 中依赖的itmes
      // console.log(this.items)
      this.set_items(this.items)
      // 重新计算总价格
      this.calcTotal()
    },
    // 计算所有选中商品的价格乘数量的和
    calcTotal () {
      let total = 0
      // console.loge(total)
      // 去除未选中的商品
      const checkItems = this.items.filter(item => item.checked)

      checkItems.forEach(item => {
        total += item.minPrice * item.num
      })
      // 保留小数
      total = parseFloat(total.toFixed(2))
      console.log(total)
      // 将计算好的总价格 给 vuex cart 中 total
      this.set_total(total)
    },
    ...mapMutations('cart', ['set_total', 'set_items', 'set_allChecked', 'set_all_item_check'])
  },
  computed: {
    ...mapState({
      items: (state) => JSON.parse(JSON.stringify(state.cart.items)),
      total: (state) => state.cart.total
    }),
    allChecked: {
      get () {
        return this.$store.state.cart.allChecked
      },
      set (newVal) {
        this.set_allChecked(newVal)
        this.set_all_item_check(newVal)
        this.calcTotal()
      }
    }
  },
  components: {
    MyTabbar,
    list
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin-top: 46px;
  margin-bottom: 70px;
  .delete-button {
    height: 100%;
  }
  .item{
    display: flex;
    background-color: #fafafa;
    .van-checkbox{
      margin: 0 6px;
    }
    .van-card{
      flex: 1;
    }
  }
  .van-submit-bar{
    margin-bottom: 50px;
  }
}
</style>
